import React, { Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Spin } from 'antd';
import Main from './pages/main';
import './app.less';
import routes from './pages/routes';

function Log() {
  return (
    <div className="app-log">
      <Spin size="small" />
      <span style={{ marginLeft: 12 }}>加载中...</span>
    </div>
  );
}

function App() {
  return (
    <div className="app">
      <div className="app-route">
        <BrowserRouter>
          <Suspense fallback={<Log />}>
            <Routes>
              <Route path="/" element={<Main />}>
                {routes.map(({ name, component: Component, path }) => {
                  return (
                    <Route key={name} element={<Component />} path={path} />
                  );
                })}
              </Route>
            </Routes>
          </Suspense>
        </BrowserRouter>
      </div>
    </div>
  );
}

export default App;
